<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>首页</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<header>
		<div class="container">
			<nav class="clearfix">
				<div class="logo f-left">
					<img src="img/brand-white.png" alt="">
				</div>
				<ul class="f-left">
					<li><a href="#" class="active">Home</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Messages</a></li>
					<li><a href="#">Docs</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<div class="main">
		<div class="container">
			<div class="main-inner">
				<div class="box left">
					<div class="card">
						<div class="dave eng">
							<img src="img/iceland.jpg" alt="这是一张很帅的自拍" class="dave-img">
							<img src="img/avatar-dhg.png" alt="" class="me">
							<div class="txt">
								<h3>Dave Gamche</h3>
								<p>I aisn i was a little bit taller, wish i was a baller.</p>
							</div>
						</div>
						<div class="about eng">
							<h3>About</h3>
							<ul>
								<li>Went to <a href="#">On, CXanada</a></li>
								<li>Became frends ends with <a href="#">Obame</a></li>
								<li>Worked at <a href="#">Github</a></li>
								<li>Lives in <a href="#">Sandra Franciscon, CA</a></li>
								<li>From <a href="#">Seattle, WA</a></li>
							</ul>
						</div>
						<div class="photos eng">
							<h3>Photos</h3>
							<div class="box-img">
								<a href="#"><img src="img/instagram_5.jpg" alt=""></a>
								<a href="#"><img src="img/instagram_6.jpg" alt=""></a>
								<a href="#"><img src="img/instagram_7.jpg" alt=""></a>
								<a href="#"><img src="img/instagram_8.jpg" alt=""></a>
								<a href="#"><img src="img/instagram_9.jpg" alt=""></a>
								<a href="#"><img src="img/instagram_10.jpg" alt=""></a>
							</div>
						</div>
					</div>
				</div>
				<div class="box center">
					<div class="card">
						<div class="gamache eng">
							<h3>Dave Gamache<time>4min</time></h3>
							<p>Aenean lacina bibendum nulla sed consecteur. Vestibulum id ligula porta felis euismod semper semper. Morbi leo risus, porta ac consectecur ac. vestibulem at5 eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semboer. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.</p>
							<div class="box-img">
								<a href="#"><img src="img/unsplash_1.jpg" alt=""></a>
								<a href="#"><img src="img/instagram_1.jpg" alt=""></a>
								<a href="#"><img src="img/instagram_13.jpg" alt=""></a>
								<a href="#"><img src="img/unsplash_2.jpg" alt=""></a>
							</div>
							<div class="box-txt">
								<p><span>Jaconb ihorntor:</span>Donce id elit non mi porta gravida at eget metus metus. Vivamus sagittis lacu vel augue laoreet rutrum faucibus dolor. Donec ullamcorper nulla non consectetur et. Sed posuere consectur est lobortis.</p>
								<p><span>Jaconb ihorntor:</span>Donce id elit non mi porta gravida at eget metus metus. Vivamus sagittis lacu vel augue laoreet rutrum faucibus dolor. Donec ullamcorper nulla non consectetur et. Sed posuere consectur est lobortis.</p>
							</div>
							<div class="box-txt">
								<h3>Jacob Thornton<time>12min</time></h3>
								<p>Donce id elit non mi porta gravida at eget metus metus.Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur risiculus mus. Morbi leo risus, porta ac consecttur ac,vestibulum at eros, Lorem ipsum dolor sit maet, consectetur adipiscing elit.</p>
							</div>
							<div class="box-txt pb-0 border-none">
								<h3>Mark Otto<time>34min</time></h3>
								<p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum is ligula porta felis euismod seper. Aenean eu leo quam. Pellentesaque ornare sem lacinaa quam venenatis veatiibulum. Etiam porta sem malessuada magna mollis euismod. Donecsed odio dui.</p>
								<img src="img/instagram_3.jpg" alt="" class="w-100">
								<p><span>Dave Gamache:</span>Donce id elit non mi porta gravida at eget metus metus.Vivamus sagittis lacu vel augue laoreet rutrum faucibus dolor. Donec ullamcorper nulla non metus auctor friailla, Praesent commodo cursus magna, vel scelerisque nisl consectetur et,Sed posuere consectetur est at lobortis.</p>
							</div>
						</div>
					</div>
				</div>
				<div class="box right">
					<div class="card">
						<div class="sponsored eng">
							<h3>Sponsored</h3>
							<img src="img/instagram_2.jpg" alt="" class="w-100 mg-img">
							<h3>it might be time to visit icelang.</h3>
							<p>Iceland is so chill, and everything look cool here,Also,we heard the people are pretty nice.What are you waiying for？</p>
							<a href="#" class="btn">But a ticket</a>
						</div>
						<div class="likes eng">
							<div class="likes-inner">
								<h3>Likes</h3>
								<div class="top clearfix">
									<img src="img/avatar-fat.jpg" alt="">
									<div class="likes-txt">
										<p><span>Jacob THornton</span>@fat</p>
										<a href="#" class="btn">foIIOW</a>
									</div>
								</div>
								<div class="bottom clearfix">
									<img src="img/avatar-mdo.png" alt="">
									<div class="likes-txt">
										<p><span>Mark Otto</span>@mdo</p>
										<a href="#" class="btn">foIIOW</a>
									</div>
								</div>
							</div>
							<p class="likes-p">Dave reaiiy likes these nerds, no noe konews why though.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer>
		<p>Designed and built with all the love in the worild by <a href="#">@mdo</a>,<a href="#">@fat</a>,ang<a href="#">@dhg</a></p>
		<p>
			<a href="#">About</a>
			<a href="#">Terms</a>
			<a href="#">Privacy</a>
			<a href="#">Licenses</a>
			<a href="#">FAQ</a>
		</p>
	</footer>
</body>
</html>